/**
 * ****************异步问题******************************
 * 一、react中如何使用原生使用
 * 在componentDidMount()中绑定事件
 * 
 * 
 * 二、setState是异步的还是同步
 * react18版本:不管是在合成事件、原生事件、定时器中都是异步的
 * react17版本：在合成事件是异步的，在原生事件和定时器中是同步
 * 
 * 
 */
import React, { Component } from 'react'

export default class StateDemo1 extends Component {
  constructor(){
    super()
    this.state={
        count:0
    }
  }
  componentDidMount(){
    document.querySelector('#btn').addEventListener('click',()=>{
        this.setState({
            count:this.state.count+1
        })
        console.log('原生事件',this.state.count);
    })
  }
  clickHandle=()=>{
    this.setState({
        count:this.state.count+1
    })
    console.log('count',this.state.count);
  }
  timeHandle=()=>{
    setTimeout(() => {
       this.setState({
           count:this.state.count+1
       })
       console.log('count',this.state.count);
    }, 0);
 }
  render() {
    return (
      <div>
          <div>{this.state.count}</div>
         <button onClick={this.clickHandle}>合成事件</button>
         <button onClick={this.timeHandle}>定时器</button>
         <button id='btn'>原生事件</button>
      </div>
    )
  }
}
